import React from 'react';
import {
  View,
  Text,
  Button,
  Platform,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation} from '@react-navigation/native';

import {Header} from '@react-navigation/elements';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

import {useMount} from 'ahooks';
import style from './style.less';

import ToggleDrawer from '../../ToggleDrawer';

const HeaderTitle = ({ToggleDrawer, ...otherProps}) => {
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const defHeaderHeight = getDefaultHeaderHeight(frame, false, insets.top);
  const height = defHeaderHeight - insets.top;
  return (
    <View
      style={[
        style.HeaderTitle,
        {
          height,
        },
      ]}>
      {ToggleDrawer}
      <View style={style.HeaderTitleContent}>
        <Text>内容</Text>
      </View>
    </View>
  );
};
const rPPath = 'OPlayer';
export default ({leftNavIsOpen, setLeftNavIsOpen}) => {
  const navigation = useNavigation();
  // useMount(() => {
  //   navigation.setOptions({
  //     headerShown: false,
  //   });
  // });
  return (
    <View style={{flex: 1, padding: 0}}>
      <HeaderTitle
        ToggleDrawer={
          <ToggleDrawer
            leftNavIsOpen={leftNavIsOpen}
            setLeftNavIsOpen={setLeftNavIsOpen}
          />
        }
      />
      <View style={style.Tmp}></View>
      <ScrollView style={{flex: 1}}>
        <Text>视频</Text>
        <Button
          title="Audio"
          onPress={() => {
            navigation.navigate(`${rPPath}/Audio`);
          }}
        />
      </ScrollView>
    </View>
  );
};
